<template>
  <div id="main">
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <div class="img">
          <img v-bind:src="data.pictures[0]" class="good-img">
        </div>
        <div class="bottom">
          <el-row type="flex" align="middle">
            <el-col :span="12">
              <div class="good-seller-font text-hidden-single">{{data.goodName}}</div>
              <div class="good-font">￥{{data.price}}</div>
            </el-col>
            <el-col :span="12" class="adjustment-button">
              <el-button class="update-button" plain v-on:click="buy">购买</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "good_custom",
  props: ['data'],
  methods: {
    buy: function () {
      this.$router.push({
        path: "/DetailedInformation",
        query: {
          data: this.data
        }
      })
    }
  },
  created() {
    // alert(JSON.stringify(this.data))
  }
}
</script>

<style lang="scss" scoped>
#main {
  width: 250px;
  height: 300px;
  display: inline-block;
  border: 1px solid grey;
  border-radius: 10px;
  margin: 0 10px 0 10px;
}
#main:hover {
  border: 1px solid #B0E0E6;
}
.img {
  width: 190px;
  height: 190px;
  margin: 0 auto;
}
.bottom {
  width: 250px;
  height: 30px;
>>> .el-button--primary.is-plain {
  background: rgba(176, 224, 230, 1);
}
}
.good-img {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  margin-top: 10px
}
.good-font {
  left: 5%;
  font-size: 30px;
  color: rgba(255, 130, 71, 1)
}
.good-seller-font {
  padding-top: 20px;
  font-size: 28px;
  font-weight: bold;
}
.update-button {
  background: rgba(176, 224, 230, 0.8);
}
.update-button:hover {
  background: rgba(176, 224, 230, 0.4);
  border: 1px solid rgba(176, 224, 230, 1);
  color: rgba(28, 28, 28, 0.6);
}
.update-button:focus {
  background: rgba(176, 224, 230, 0.4);
  border: 1px solid rgba(176, 224, 230, 1);
  color: rgba(28, 28, 28, 0.6);
}
.adjustment-button {
  padding-top: 35px;
}
.text-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-hidden-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.good-name-font {
  color: rgba(28, 28, 28, 0.6);
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 20px;
}
.good-message-font {
  color: #7D7D7D;
  font-size: 20px;
  font-weight: 500;
}
.adjustment-message-item {
  padding-top: 20px;
}
.dialog-img {
  width: 120px;
  height: 120px;
  border-radius: 20px;
}
.dialog-img-box {
  padding-left: 20px;
  padding-top: 35px;
}
.dialog-box {
  line-height: 35px;
}
>>> .el-button--primary.is-plain {
  font-size: 15px;
  font-weight: 500;
  color: rgba(28, 28, 28, 0.6);
}
>>> .el-dialog {
  width: 400px;
  border-radius: 25px;
  background: #F0FFFF;
}
>>> .el-dialog__body {
  padding: 5px 10px 15px 10px;
}
>>> .el-form-item {
  margin: 0;
}
</style>
